<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="style.css" />
	</head>

	<body>

		<div id="app">
			<div class="container">
				<simple-grid :data-list="gridData" :columns="gridColumns">
				</simple-grid>
			</div>
		</div>

		<template id="grid-template">
			<table>
				<thead>
					<tr>
						<th v-for="col in columns">
							{{ col | capitalize}}
						</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(index,entry) in dataList">
						<td v-for="col in columns">
							{{entry[col]}}
						</td>
					</tr>
				</tbody>
			</table>
		</template>

		<script src="js/vue.js"></script>
		<script src="js/zepto.js"></script>
		<script src="js/ajax-helper.js"></script>
		<script>
			Vue.component('simple-grid', {
				template: '#grid-template',
				props: ['dataList', 'columns']
			})
		</script>
		<script>
			var ajaxHelper = new AjaxHelper()

			var demo = new Vue({
				el: '#app',
				data: {
					gridColumns: ['customerId', 'companyName', 'contactName', 'phone'],
					gridData: [],
					apiUrl: 'http://211.149.193.19:8080/api/customers'
				},
				ready: function() {
					this.getCustomers()
				},
				methods: {

					getCustomers: function() {
						// 定义vm变量，让它指向this,this是当前的Vue实例
						var vm = this,
							callback = function(data) {
								// 由于函数的作用域，这里不能用this
								vm.$set('gridData', data)
							}
						ajaxHelper.jsonp(vm.apiUrl, null, callback)
					}
				}
			})
		</script>
	</body>

</html>